/**
 * @desc 学员详情
 */
<template>
    <view class="detail">
        <view class="detail-header">
            <nut-avatar size="large" :icon="userInfo.avatarUrl">
            </nut-avatar>
        </view>
        <view class="detail-name">
            {{ userInfo.name || userInfo.nickName }}
        </view>
        <view class="detail-day">
            共计学车{{ logs.length }}天
        </view>
    </view>
</template>

<script>

import { reactive, toRefs } from 'vue';
import db from '../../server/index';
import Taro from '@tarojs/taro';
const { id } = Taro.getCurrentInstance().router.params
export default {
    name: 'Detail',
    data() {
        return {
            userInfo: {
                name: "",
                nickName: "",
                avatarUrl: ""
            },
            logs: []
        }
    },
    onPullDownRefresh() {
        Taro.showLoading({
            title: '加载中',
        })
        this.init()
    },
    methods: {
        init() {
            db.collection('phone').where({
                _id: id
            }).get().then(({ data = [] }) => {
                const { name, nickName, avatarUrl, _openid, phone } = data[0];
                this.userInfo = {
                    name, nickName, avatarUrl
                }
                db.collection('user').where({
                    _openid,
                    done: true
                }).get().then(({ data = [] }) => {
                    this.logs = data
                    Taro.stopPullDownRefresh();
                    Taro.hideLoading();
                })
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.detail {
    width: 100vw;
    height: 100vh;

    &-header {
        text-align: center;
        padding-top: 50px;
    }

    &-name {
        margin-top: 15px;
        font-size: 18px;
        text-align: center;
    }

    &-day {
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
    }
}
</style>
